<template>
	<view class="pageBg">
		<view class="state centerSubElements">
			<image class="icon" src="/static/images/my/pendingPayment.png" mode="heightFix"></image>
			<view class="title">
				{{ order_status }}
			</view>
		</view>
		<view class="address flex">
			<exhibitionCard class="exhibitionCard" :data="Info"></exhibitionCard>
		</view>

		<goodsitem v-for="(item, index) in Info.order_goods" :info="item" :key="item.id"></goodsitem>
		<view class="goodsDetails">
			<view class="line">
				<view class="label">{{ Info.spec_value_str }}</view>
				<view class="val">￥{{ Info.order_amount }}</view>
			</view>

			<view class="line summary">
				<view class="label">实付款</view>
				<view class="val">￥{{ Info.order_amount }}</view>
			</view>
		</view>
		<!-- <view class="messageBox">
			<view class="title">
				订单留言
			</view>
			<textarea maxlength="-1" auto-height class="message" placeholder="如有,请留言"></textarea>
		</view> -->

		<view class="play" v-for="(item, index) in pay_way" v-if="Info.order_status == 0">
			<view class="title">付款方式</view>
			<view class="val">
				{{ item.name }}
				<view class="select" @click="SelectedGood(index, item)">
					<image class="Selecticon" v-if="index == activeIndex" src="/static/select.png" mode=""></image>
					<view class="yuan icon" v-else></view>
				</view>
			</view>
		</view>

		<view class="orderDetails">
			<view class="line flex">
				<view class="label">订单编号：</view>
				<view class="val">
					{{ Info.order_sn }}
				</view>
				<view class="btn" @click="copy">复制</view>
			</view>
			<view class="line flex">
				<view class="label">下单时间：</view>
				<view class="val">
					{{ Info.create_time }}
				</view>
			</view>
		</view>
		<view class="opt flex">
			<view class="del btn" v-if="Info.order_status == 0" @click="del">取消订单</view>
			<view v-if="Info.order_status == 0" class="payment btn" @click="zhifubaoPay">立即支付</view>
			<view class="del btn" v-if="Info.order_status == 1" @click="refund">申请退款</view>
			<view class="payment btn" v-if="Info.order_status == 1" @click="apply">立即使用</view>
			<view class="payment btn" v-if="Info.order_status == 3 || Info.order_status == 2" @click="customerService">联系客服</view>
		</view>
		<service ref="service" title="扫码添加客服"></service>
	</view>
</template>

<script>
	import exhibitionCard from '@/components/wbz/exhibitionCard/exhibitionCard.vue';
	import service from '@/components/service/service.vue';
	export default {
		components: {
			exhibitionCard,
			service,
		},
		computed: {
			order_status() {
				// 0-待支付;1-待使用;2-退款中;3-已完成;4-已退款
				switch (this.Info.order_status) {
					case 0:
						return '待支付';
						break;
					case 1:
						return '待使用';
						break;
					case 2:
						return '退款中';
						break;
					case 3:
						return '已完成';
						break;
					case 4:
						return '已退款';
						break;
				}
			},
		},
		data() {
			return {
				Good_id: null,
				Info: {},
				activeIndex: 0, //订单方式的下标
				formList: null, //form表单数据
				pay_way: [], //订单方式
				pay_way_id: 2, //支付方式的id
				nickname: null,
			};
		},
		onLoad({ id, nickname }) {
			this.id = id;
			this.init();
			this.nickname = nickname;
		},
		methods: {
			customerService() {
				this.$refs.service.open();
			},
			apply() {
				uni.navigateTo({
					url: '/pages/my/admissionTicket/details/details?oid=' + this.id,
				});
			},
			async refund() {
				uni.showModal({
					title: '确认要申请退款吗？',
					content: '申请退款后门票也会作废',
					success: async (res) => {
						if (res.confirm) {
							const { data } = await this.$api.OrderRefund({ id: this.id });
							this.showToastMsg('已提交申请', true);
						}
					},
				});
			},
			async del() {
				const { data } = await this.$api.OrderDel({ id: this.id });
				this.showToastMsg('取消成功', true);
			},
			async init() {
				const { data } = await this.$api.OrderGetOrderDetail({ id: this.id });
				this.Info = data;
			},
			copy() {
				uni.setClipboardData({
					data: this.Info.order_sn,
				});
			},
			async zhifubaoPay() {
				const { data } = await this.$api.payUnifiedpay({
					url: this.networkIndistinguishable + '/pages/my/order/details/details?id=' + this.id,
					order_id: this.Info.oid,
				});
				document.querySelector('body').innerHTML = data;
				document.forms[0].submit();
			},

			SelectedGood(index, item) {
				//选择支付方式
				this.activeIndex = index;
				this.pay_way_id = item.pay_way;
			},
		},
	};
</script>

<style lang="scss">
	.pageBg {
		padding-bottom: 100rpx;

		.state {
			width: 100%;
			height: 100rpx;
			background: #ffffff;

			.icon {
				height: 43.09rpx;
				margin-right: 18rpx;
			}

			.title {
				font-size: $uni-font-size-15;
				color: $price-color;
			}
		}

		.address {
			width: $connet-width;
			background: $content-bg-colcor;
			border-radius: $border-radius;
			margin: $submargin-width auto;

			.img {
				height: 100%;
				margin: 0 $margin-width;

				.icon {
					width: 50rpx;
				}
			}

			.txt {
				height: 100%;
				justify-content: space-evenly;
				flex-direction: column;
				color: $title-color;

				.title {
					font-size: $uni-font-size-15;
					font-weight: bold;
				}

				.subTitle {
					display: flex;
					font-size: $uni-font-size-14;

					.name {
						margin-right: 40rpx;
					}
				}
			}
		}

		.goodsDetails {
			width: $connet-width;
			height: auto;
			overflow: hidden;
			background: $content-bg-colcor;
			border-radius: $border-radius;
			margin: $submargin-width auto;

			.line {
				padding: $margin-width 0;
				margin: 0 $margin-width;
				display: flex;
				justify-content: space-between;
				font-size: $uni-font-size-12;
				color: $title-colcor;
			}

			.summary {
				border-top: 1rpx solid $search-border-color;
				font-size: $uni-font-size-14;

				.label {
				}

				.val {
					font-weight: bold;
					color: $price-color;
				}
			}
		}

		.messageBox {
			width: $connet-width;
			margin: $submargin-width auto;
			background-color: $content-bg-colcor;

			.title {
				padding: 25rpx 0 $submargin-width $margin-width;
				font-size: $uni-font-size-14;
			}

			.message {
				padding: 0 $margin-width $submargin-width;
				font-size: $uni-font-size-12;
			}
		}

		.orderDetails {
			width: $connet-width;
			margin: $submargin-width auto;
			background-color: $content-bg-colcor;
			font-size: $uni-font-size-12;
			color: $title-colcor;
			overflow: hidden;

			.line {
				margin: $margin-width;

				.btn {
					color: $price-color;
					margin-left: $submargin-width;
				}
			}
		}

		.opt {
			width: 100%;
			height: 100rpx;
			background: $content-bg-colcor;
			position: fixed;
			bottom: 0;
			left: 0;
			justify-content: flex-end;
			align-items: center;

			.btn {
				width: 180rpx;
				height: 60rpx;
				border-radius: 30rpx;
				line-height: 60rpx;
				text-align: center;
				border: 1rpx solid #999999;
				color: #999999;
				margin-right: $margin-width;
			}

			.payment {
				border-color: $price-color;
				background-color: $price-color;
				color: $txt-color;
			}

			.cancel {
				margin-right: $submargin-width;
				color: $title-colcor;
			}
		}
	}

	.play {
		width: $connet-width;
		height: 89rpx;
		background: #ffffff;
		border-radius: 20rpx;
		line-height: 89rpx;
		overflow: hidden;
		margin: $margin-width auto;
		display: flex;
		justify-content: space-between;

		.title {
			float: left;
			margin-left: $margin-width;
			color: $title-colcor;
			font-size: $uni-font-size-12;
		}

		.val {
			font-size: $uni-font-size-12;
			margin-right: $submargin-width;
			display: flex;

			.select {
				width: 28rpx;
				height: 100%;
				border: 50% solid #707070;
				display: flex;
				align-items: center;
				margin-left: $margin-width;

				.Selecticon {
					width: 28rpx;
					height: 28rpx;
				}

				.yuan {
					background: #ffffff;
					opacity: 1;
					border: 1px solid #707070;
					width: 28rpx;
					height: 28rpx;
					border-radius: 50%;
				}
			}
		}
	}
</style>
